<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  <script src="./jquery/jQuery.min.js"></script>
  <script>
    /* 
      jQuery 事件绑定
        + .on(事件类型, 事件处理函数) ：隐式迭代（元素集合内有多少元素就设置多少元素）
        + .on(事件类型, 选择器, 事件处理函数) ：事件委托的绑定，把选择器元素委托给元素集合里的元素，选择器元素是元素集合内元素的后代元素
        + .on(事件类型, 复杂数据类型, 事件处理函数) ：给元素集合内的所有元素绑定事件，事件触发时，传递给事件的参数就是填写的复杂数据类型，通过事件对象中的 data 取到
        + .on(事件类型, 选择器, 数据, 事件处理函数) ：事件委托的绑定，把选择器元素委托给元素集合里的元素，传递给事件的参数就是填写的数据
        + .on({事件类型1: 事件处理函数, 事件类型2: 事件处理函数, ...}) ：给元素绑定多种事件，不能传递参数和事件委托

        + .one() : 一次性事件绑定，事件触发后，自动移除事件，和.on() 方法的参数和使用形式一样

        + .off(事件类型) : 移除元素上的所有类型的事件处理函数
        + .off(事件类型, 事件处理函数) : 移除元素上的指定类型的事件处理函数

        + .trigger(事件类型) : 触发元素上指定类型的事件
    */

    // .on()
    /* $('li').on('click', function(){
     console.log(this);
    })
    $('ul').on('click', 'li', function(){
     console.log('点击');
    })
    $('li').on('click', {name: 'jQuery'} ,function(e) {
     console.log(e);
     console.log(e.data);
    })
    $('ul').on('click', 'li', 'hello world', function(e) {
     console.log(e.data);
    })
    $('li').on({
     'click': function(){
      console.log('click');
     },
     'mouseover': function(){
      console.log('mouseover');
     }
    }) */

    // .one()
    /* $('li').one('click', function () {
      console.log(this);
    }) */
    /* $('ul').one('click', 'li', function () {
      console.log('点击');
    }) */

    // .off()
    function handlerA() {
      console.log('handlerA');
    }
    function handlerB() {
      console.log('handlerB');
    }
    $('li').on('click', handlerA)
    $('li').on('click', handlerB)
    // $('li').off('click')
    $('li').off('click', handlerA)

    // .trigger()
    $('li:first').trigger('click')
  </script>
</body>

</html>